<template>
  <div class="myself-table border-box">
    <el-table :data="dataSource" height="100%" :border="isBorber" @selection-change="handleSelection" ref="standardTable" stripe>
      <el-table-column v-if="isSelect" type="selection" :width="55" align="center" />
      <el-table-column v-if="isIndex" type="index" label="序号" :width="55" align="center" />
      <el-table-column
        v-if="serialNumber.show"
        type="index"
        align="center"
        :width="serialNumber.width || 'auto'"
        :label="serialNumber.label"
      />
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="item.align || 'center'"
        :sortable="item.isSort || false"
        :show-overflow-tooltip="item.showOverflowTooltip === false ? false : true"
      >
        <template slot-scope="scope">
          <slot v-if="item.isSlot" :name="item.prop" v-bind="scope" />
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "TableCom",
  components: {
  },
  props: {
    isBorber: {
      type: Boolean,
      default: false
    },
    isSelect: {
      type: Boolean,
      default: false
    },
    singleSelect:{
      type: Boolean,
      default: false,
    },
    isIndex: {
      type: Boolean,
      default: false
    },
    serialNumber: {
      type: Object,
      default: () => ({
        show: false
      })
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    dataSource: {
      handler(newVal) {
        // eslint-disable-next-line vue/no-mutating-props
        this.dataSource = newVal;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleSelection(val) {
      // if(this.singleSelect){
      //   const i = val.length - 1;
      //   const row = val[i]
      //   this.$refs.standardTable.clearSelection()
      //   this.$refs.standardTable.toggleRowSelection(row);
      //   this.$emit("selectFun", [row]);
      // }else{
        this.$emit("selectFun", val);
      // }
    }
  }
};
</script>
<style lang="scss" scoped>
.myself-table {
  width: 100%;
  height: 100%;
  .btn-box {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    span {
      font-size: 14px;
      font-family: HarmonyOS Sans;
      font-weight: 400;
      line-height: 20px;
      color: var(--primary-color);
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.myself-table {
  .el-table__header-wrapper th{
    background-color: rgba(54, 112, 245, .05);
    color: #65769D;
    font-size: 14px;
  }
  td.el-table__cell {
    color: #485166
  }
  .my-btn-box {
    width: 100%;
    height: 100%;
    padding: 0 10px;

    span {
      font-size: 14px;
      font-family: HarmonyOS Sans;
      font-weight: 400;
      line-height: 20px;
      color: #3670F5;
      cursor: pointer;
    }
  }
}
</style>
